<template>
  <div class="user-container">
    <div class="search-container">
      <h-search-bar :show-more="true" @toggle="searchMore = $event" @search="getPageList">
        <el-form :model="queryParams" label-width="80px">
          <el-row>
            <el-col >
              <el-form-item label="用户名称">
                <el-input v-model="queryParams.businessName" style="width: 220px" clearable/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="searchMore">
          </el-row>
        </el-form>
      </h-search-bar>
      <div class="btn-container">
        <el-button type="success" icon="Plus" @click="handleAdd">新 增</el-button>
      </div>
    </div>

    <!--Table-->
    <h-table :list="list" :total="total" :options="options" :operates="operates" :columns="setting.columns"/>

    <Pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getPageList"/>

    <!--Dialog-->
    <el-dialog :title="dialog1.title" :width="dialog1.dWidth" v-model="dialog1.show" :append-to-body="false"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="formInfo" :model="dialog1.formInfo" :rules="dialog1.rules" label-width="75px" label-position="left">
        <el-form-item label="公司名" prop="">
          <el-input v-model.trim="dialog1.formInfo.username" :style="dialog1.width"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" v-preventDoubleClick @click="submitDialog1">确 定</el-button>
        <el-button @click="dialog1Close">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="User">
import setting from './setting'
import {isEmpty} from "@/utils/validate.js";

/** Base */
const {proxy} = getCurrentInstance()

/** Data */
//SearchBar
const searchMore = ref(false)
//Table
const table = reactive({
  list: [{}],
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  options: {// table 配置的参数
    stripe: true,
    loading: false,
    highlightCurrentRow: true,
    mutiSelect: true
  },
  operates: {// table 配置的参数
    width: 160,
    fixed: "right",
    label: "操作",
    list: [
      {
        id: "edit", label: "修改", link: true, type: "primary", show: true, disabled: false,
        method: (index, row) => {
          handleEdit(row)
        }
      },
      {
        id: "del", label: "删除", link: true, type: "primary", show: true, disabled: false,
        method: (index, row) => {
          handleDel(row)
        }
      }
    ]
  }
})
const {list, total, queryParams, options, operates} = toRefs(table);

/** dialog*/
const dialog = reactive({
  dialog1: {
    show: false,
    title: '新增',
    dWidth: '550px',
    width: 'width:220px',
    rules: setting.rules,
    roleOptions: [],
    formInfo: {
      username: '',
      nickName: '',
      phone: '',
      systemRoleId: '',
    },
  }
})
const {dialog1} = toRefs(dialog)

/** 生命周期钩子 */
onMounted(() => {
  // getPageList()
})

/** Method */
//表单数据
async function getPageList() {
  let _ = proxy
  options.value.loading = true
  const {data: res} = await _.$H.post(_.$A.user.page, queryParams.value)
  list.value = res.data.list || []
  total.value = res.data.total || 0
  options.value.loading = false
}

//删除
function handleDel(row) {
  let _ = proxy
  let delData = {systemUserIdList: [row.systemUserId]}
  _.$modal.confirm("确认删除该条记录？", "删除", () => {
    // delOne(delData)
  })
}

//单条删除
async function delOne(id) {
  let _ = proxy
  const {data: res} = await _.$H.post(_.$A.user.del, JSON.stringify(id))
  if (res.code === 200) {
    _.$modal.msgSuccess('删除成功！')
  } else {
  }
  getTableData()
}

/** Dialog1 */
//新增
function handleAdd() {
  let _ = proxy
  dialog1.value.show = true
}

function handleEdit() {
  let _ = proxy
  dialog1.value.show = true
}

//提交按钮
function submitDialog1() {
  let _ = proxy
  _.$refs["dialog1Form"].validate(async (valid) => {
    if (valid) {
      if (_.$V.isEmpty(dialog1.value.formInfo.systemUserId)) {
        const {data: res} = await _.$H.post(_.$A.systemUser.add, dialog1.value.formInfo)
        if (res.code === 200) {
          _.$modal.msgSuccess('提交成功！')
        } else {
        }
      } else {
        const {data: res} = await _.$H.post(_.$A.systemUser.update, dialog1.value.formInfo)
        if (res.code === 200) {
          _.$modal.msgSuccess('修改成功！')
        } else {
        }
      }
      getPageList()
      dialog1.value.show = false
    }
  })
}

//dialog1关闭
function dialog1Close() {
  dialog1.value.show = false
  reset()
}

//dialog1重置表单
function reset() {
  let _ = proxy
  dialog1.value.formInfo = {
    username: '',
  }
  _.resetForm("formInfo")
}
</script>

<style lang="less" scoped>
@import "index.less";
</style>
